@layout("/common/_container.html",{js:["/assets/order/outOrder/outOrderQuery.js"]}){

<div class="layui-body-header">
    <span class="layui-body-header-title">Outbound Order Query</span>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form toolbar">
                        <div class="layui-form-item">
		                    <div class="layui-inline">
		                        <input id="condition" class="layui-input" type="text" placeholder="Keyword"/>
		                    </div>
		                    <div class="layui-inline">
								<select id="outOrderStatus">
									<option value="">Select Status</option>
									<option value="PENDING_SUBMIT">PENDING_SUBMIT</option>
									<option value="PENDING_CONFIRMATION">PENDING_CONFIRMATION</option>
									<option value="PENDING_SHIPMENT">PENDING_SHIPMENT</option>
									<option value="SHIPPED_OUT">SHIPPED_OUT</option>
									<option value="VOID">VOID</option>
									<option value="REVOKED">REVOKED</option>
								</select>
		                    </div>
		                    <div class="layui-inline">
								<select id="outCustomerId">
					            	<option value="">Select Customer</option>
						            @for(item in basicCustomerList!){
						            <option value="${item.id}">${item.customerName}</option>
						            @}
					        	</select>
		                    </div>
		                    <div class="layui-inline">
								<select id="outStorehouseId">
					            	<option value="">Select Warehouse</option>
						            @for(item in basicWarehouseList!){
						            <option value="${item.id}">${item.warehouseName}</option>
						            @}
					        	</select>
		                    </div>
		                    <div class="layui-inline" style="width: 150px;">
		                        <input id="startTime" class="layui-input" type="text" placeholder="Order Date From"/>
		                    </div>
                            <div class="layui-inline">
                            	-
                            </div>
		                    <div class="layui-inline" style="width: 150px;">
		                        <input id="endTime" class="layui-input" type="text" placeholder="Order Date To"/>
		                    </div>
		                    <div class="layui-inline" style="width: 150px;">
		                        <input id="startTime3" class="layui-input" type="text" placeholder="Shipment Date From"/>
		                    </div>
                            <div class="layui-inline">
                            	-
                            </div>
		                    <div class="layui-inline" style="width: 150px;">
		                        <input id="endTime3" class="layui-input" type="text" placeholder="Shipment Date To"/>
		                    </div>
		                    <div class="layui-inline" style="width: 150px;">
		                        <input id="startTime2" class="layui-input" type="text" placeholder="Completion Date From"/>
		                    </div>
                            <div class="layui-inline">
                            	-
                            </div>
		                    <div class="layui-inline" style="width: 150px;">
		                        <input id="endTime2" class="layui-input" type="text" placeholder="Completion Date To"/>
		                    </div>
		                    <div class="layui-inline">
		                        <button id="btnSearchout" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>Search</button>
								@if(shiro.hasPermission("/outOrder/export")){
									<button id="btnExp" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>Export</button>
									<button id="btnExpBySpec" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>Export XLSX By Condition</button>
								@}
		                    </div>
		                </div>
		            </div>
		            <table class="layui-table" id="outOrderTable" lay-filter="outOrderTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="outOrderStatusTpl">
  {{#  if(d.outOrderStatus === 'Void'){ }}
    <span style="color: #FF4500;font-weight: 600;">{{ d.outOrderStatus }}</span>
  {{#  }else if(d.outOrderStatus === 'Pending Outbound'){ }}
    <span style="color: #FFC300;font-weight: 600;">{{ d.outOrderStatus }}</span>
  {{#  }else if(d.outOrderStatus === 'Outbound Completed'){ }}
    <span style="color: #43CF7C;font-weight: 600;">{{ d.outOrderStatus }}</span>
  {{#  } else { }}
    {{ d.outOrderStatus }}
  {{#  } }}
</script>

<script type="text/html" id="tableBar">
    {{#  if(d.outOrderStatus === 'Pending Outbound' || d.outOrderStatus === 'Outbound Completed' || d.outOrderStatus === 'Pending Confirmation'){ }}
    	<a class="layui-btn layui-btn-danger layui-btn-xs" style="font-size: 7px;" lay-event="revoke" id="revoke">Withdraw</a>
    {{#  }else if(d.outOrderStatus === 'Void'){ }}
    	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="Launch" id="Launch">Launch</a>
    {{#   } }}
</script>

@}
